  <template>
      <div class="index-lists">
          <el-collapse v-model="activeNames">
              <el-collapse-item title="发明人" name="1">
                  <el-table class="mt-4" size="large" stripe>
                      <el-table-column label="序号" prop="test" min-width="180" />
                      <el-table-column label="姓名" prop="test" min-width="180" />
                      <el-table-column label="国别" prop="test" min-width="180" />
                      <el-table-column label="身份证号码" prop="test" min-width="180" />
                      <el-table-column label="电话" prop="test" min-width="180" />
                      <el-table-column label="邮箱" prop="test" min-width="180" />
                      <el-table-column label="是否公布姓名" prop="test" min-width="180" />
                  </el-table>
              </el-collapse-item>
              <el-collapse-item title="申请人" name="2">
                  <el-table class="mt-4" size="large" stripe>
                      <el-table-column label="序号" prop="test" min-width="180" />
                      <el-table-column label="申请人" prop="test" min-width="180" />
                      <el-table-column label="国别" prop="test" min-width="180" />
                      <el-table-column label="申请类型" prop="test" min-width="180" />
                      <el-table-column label="总委编号" prop="test" min-width="180" />
                      <el-table-column label="地址" prop="test" min-width="180" />
                      <el-table-column label="邮政编码" prop="test" min-width="180" />
                  </el-table>
              </el-collapse-item>
              <el-collapse-item title="联系人" name="3">
                  <el-table class="mt-4" size="large" stripe>
                      <el-table-column label="序号" prop="test" min-width="180" />
                      <el-table-column label="姓名" prop="test" min-width="180" />
                      <el-table-column label="电话" prop="test" min-width="180" />
                      <el-table-column label="邮件地址" prop="test" min-width="180" />
                      <el-table-column label="地址" prop="test" min-width="180" />
                      <el-table-column label="邮政编码" prop="test" min-width="180" />
                  </el-table>
              </el-collapse-item>
              <el-collapse-item title="代理人" name="4">
                  <el-table class="mt-4" size="large" stripe>
                      <el-table-column label="序号" prop="test" min-width="180" />
                      <el-table-column label="姓名" prop="test" min-width="180" />
                      <el-table-column label="执业证号" prop="test" min-width="180" />
                      <el-table-column label="电话" prop="test" min-width="180" />
                      <el-table-column label="邮件" prop="test" min-width="180" />
                      <el-table-column label="代理机构" prop="test" min-width="180" />
                  </el-table>
              </el-collapse-item>
              <el-collapse-item title="优先权信息" name="5">
                  <el-table class="mt-4" size="large" stripe>
                      <el-table-column label="序号" prop="test" min-width="180" />
                      <el-table-column label="原受理机构名称" prop="test" min-width="180" />
                      <el-table-column label="接入码" prop="test" min-width="180" />
                      <el-table-column label="在先申请日" prop="test" min-width="180" />
                      <el-table-column label="在先申请号" prop="test" min-width="180" />
                  </el-table>
              </el-collapse-item>
          </el-collapse>
      </div>
  </template>
  <script lang="ts" setup>
  import type { FormInstance } from 'element-plus'
  import { caseEdit, caseAdd, caseDetail } from '@/api/case'
  import Popup from '@/components/popup/index.vue'
  import feedback from '@/utils/feedback'
  import type { PropType } from 'vue'
  const route = useRoute()
  const router = useRouter()
  defineProps({
      dictData: {
          type: Object as PropType<Record<string, any[]>>,
          default: () => ({})
      }
  })
  //const activeNames = ["1", "2", "3", "4", "5", "6"];
  const emit = defineEmits(['success', 'close'])
  const formRef = shallowRef<FormInstance>()
  const popupRef = shallowRef<InstanceType<typeof Popup>>()
  const mode = ref('add')
  const popupTitle = computed(() => {
      return mode.value == 'edit' ? '编辑新建合同案件信息' : '新增新建合同案件信息'
  })

  const formData = reactive({
      caseName: '',
      caseType: '',
      businessType: '',
      putinType: '',
      undertakingDepartment: '',
      conductor: '',
      taxRate: '',
      costType: '',
      cost: '',
      contributionPool: '',
      ownershipDistribution: '',
      haveCase: '',
      designatedCountry: '',
      brandType: '',
      classQuantity: '',
      quantity: '',
      officialFee: '',
      agencyFee: '',
      hirdPartyPayment: '',
      signedAmount: '',
      invoiceValue: '',
      fundsReceived: '',
      paidupDate: '',
      planNumber: '',
      caseStatus: '',
      caseLink: '',
      remark: '',
      caseNameid: '',
      businessTypeid: '',
      undertakingDepartmentid: '',
      ownershipDistributionid: '',
      costTypeid: '',
      correlationTypeid: '',
      isRegister: '',
      isInvalid: '',
      isExistingcase: '',
      isPapernotice: '',
      customerDocumentNumber: '',
      copyrightType: '',
      caseFlow: '',
      countryOfOrigin: '',
      agency: '',
      proposalForm: '',
      isMaterials: '',
      isFund: '',
      initialPeriod: '',
      referenceNumber: '',
      contractNumber: '',
      budget: '',
      author: '',
      homeLocation: '',
      softwareAbbreviation: '',
      versionNumber: '',
      softwareWorkDescription: '',
      developmentCompletionDate: '',
      publishedStatus: '',
      hardwareEnvironment: '',
      softwareEnvironment: '',
      programmingLanguage: '',
      sourceQuantity: '',
      functionAndArt: '',
      handlingInformation: '',
      principalDates: '',
      customerTerm: '',
      internalWearLife: '',
      isStateCompensation: '',
      click: '',
      partOwner: '',
      todonote: '',
      manageDate: '',
      countType: '',
      numberOfPoints: '',
      addtotalstatepoint: '',
      royaltyDate: '',
      workPoints: '',
      creator: '',
      chargeType: '',
      currency: '',
      sum: '',
      advancePaymentDate: '',
      paymentRequestNumber: '',
      requestedDate: '',
      accountsDate: '',
      invoiceNumber: '',
      chargeName: '',
      chargeDepict: '',
      chargeDepictfine: '',
      extendedAmount: '',
      discountRate: '',
      count: '',
      parities: '',
      collectingCompanyAccount: '',
      collectionStatus: '',
      accountDetails: '',
      slt: '',
      externalBillingNumber: '',
      externalBillingDate: '',
      beddingCondition: '',
      handOver: '',
      expenseNote: '',
      reductionType: '',
      actualCurrency: '',
      officialDeadline: '',
      ourRef: '',
      relevantCaseName: '',
      correlationType: '',
      userId: '',
      userName: '',
      id: '',
      updateUserId: '',
      updateUserName: ''
  })

  const formRules = {
      caseName: [
          {
              required: true,
              message: '请输入案件名称',
              trigger: ['blur']
          }
      ],
      businessType: [
          {
              required: true,
              message: '请选择业务类型',
              trigger: ['blur']
          }
      ],
      undertakingDepartment: [
          {
              required: true,
              message: '请选择承办部门',
              trigger: ['blur']
          }
      ],
      designatedCountry: [
          {
              required: true,
              message: '请输入申请国家（地区）',
              trigger: ['blur']
          }
      ],
      handlingInformation: [
          {
              required: true,
              message: '请输入处理事项',
              trigger: ['blur']
          }
      ],
      id: [
          {
              required: true,
              message: '请输入主键ID',
              trigger: ['blur']
          }
      ]
  }

  const handleSubmit = async () => {
      await formRef.value?.validate()
      const data: any = { ...formData }
      mode.value == 'edit' ? await caseEdit(data) : await caseAdd(data)
      popupRef.value?.close()
      feedback.msgSuccess('操作成功')
      emit('success')
  }

  const open = (type = 'add') => {
      mode.value = type
      popupRef.value?.open()
  }

  const setFormData = async (data: Record<string, any>) => {
      for (const key in formData) {
          if (data[key] != null && data[key] != undefined) {
              //@ts-ignore
              formData[key] = data[key]
          }
      }
  }

  const getDetail = async (row: Record<string, any>) => {
      const data = await caseDetail({
          id: row.id
      })
      setFormData(data)
  }

  const handleClose = () => {
      emit('close')
  }

  defineExpose({
      open,
      setFormData,
      getDetail
  })
  </script>
  <style>
  .formEdit .el-form-item {
      width: 590px;
  }
  ::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
  }
  ::v-deep .el-collapse-item__wrap {
      padding-top: 20px;
  }
  </style>
